import React, { memo, useCallback, useState } from 'react'
import PropTypes from 'prop-types'

import { SectionV2Wrapper } from './style'
import SectionHeader from '@/components/section-header'
import SectionRooms from '@/components/section-rooms'
import SectionTabs from '@/components/section-tabs'
import SectionFooter from '@/components/section-footer'

const HomeSectionV2 = memo(function HomeSectionV2(props) {
  const { infoData } = props

  const initalName = Object.keys(infoData.dest_list)[0]
  /*
    useState的初始值只会在第一次渲染组件时才会有效，之后在定义初始值，也会没有效果，由于数据是从网络中请求的，在第一次传递数据时，
      此时数据还没加载，useState的初始值被定义，后续网络请求完成，在渲染组件，再次传递数据，此时useState的初始值依旧是上一次的初始值

      解决方法：
        1.在外部只有网络数据成功时，才渲染该组件
        2.使用useEffect对数据进行监听，不过这样会导致组件渲染三次，第一次是网络还没请求成功时渲染，第二次是网络请求成功时组件渲染，第三次是
          网络请求成功后，将数据保持后渲染
  */
  const [name, setName] = useState(initalName)
  const tabNames = infoData?.dest_address?.map((item) => item?.name)
  const tabClickHandle = useCallback(function (index, name) {
    setName(name)
  }, [])

  return (
    <SectionV2Wrapper>
      <SectionHeader title={infoData.title} subtitle={infoData.subtitle} />
      <SectionTabs tabNames={tabNames} tabClick={tabClickHandle} />
      <SectionRooms
        roomList={infoData?.dest_list?.[name]}
        itemwidth="33.333%"
      />
      <SectionFooter name={name} />
    </SectionV2Wrapper>
  )
})

HomeSectionV2.propTypes = {
  infoData: PropTypes.object,
}

export default HomeSectionV2
